var myChart = echarts.init(document.querySelector(".grade .chart"));
// var myChart = echarts.init(document.getElementById('.grade .chart'));
// forecastDate示例数据：[0,35,80],[1,32,70],[2,,],[3,70,130]
var forecastDate = [];
var barData = [];
var dataCount = 30;
for (var i = 0; i < dataCount; i++) {
  var val = Math.random() * 100;
  forecastDate.push([
    i,
    echarts.number.round(Math.max(0, val - Math.random() * 100)),
    echarts.number.round(val + Math.random() * 80)
  ]);
  barData.push(echarts.number.round(val, 2));
}
console.log(forecastDate);
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                type: "solid",
                width: 2
            }
        }
    },
    title: {
        text: 'AQI'
    },
    legend: {
        data: ['实况监测', '预报']
    },
    grid: {
        left: '5%',
        right: '4%',
        bottom: '20%',
        top: '20%',
        containLabel: true,
        show: true,
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                type: "solid",
                width: 2
            }
        }
    },
    dataZoom: [
        {
        show: true,
        realtime: true,
        start: 0,
        end: 100,
        xAxisIndex: [0, 1]
        },
    ],
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['09/29', '09/30', '10/01', '10/02', '10/03', '10/04', '10/05', '10/06', '10/07', '10/08', '10/09', '10/10', '10/11', '10/12', '10/13', '10/14', '10/15', '10/16', '10/17', '10/18', '10/19', '10/20', '10/21', '10/22', '10/23', '10/24', '10/25', '10/26', '10/27', '10/28']
    },
    yAxis: {
        name: '单位：无量纲',
        type: 'value',
        splitArea: {
        show: true
        },
        nameTextStyle: {
        align: 'center',
        lineHeight: 50
        },
        axisTick: {
        show: true,
        },
        nameLocation: 'center',
        date: [0, 30, 60, 90, 120, 150]
    },
    series: [
        {
            name: "实况监测",
            type: "line",
            lineStyle: {
            normal: {
                color: "#FEA311",
                width: 3
            }
            },
            // 设置拐点 小圆点
            symbol: "circle",
            // 拐点大小
            symbolSize: 10,
            // 设置拐点颜色以及边框
            itemStyle: {
                color: '#FEA311',
                borderColor: "rgba(221, 220, 107, .1)",
                borderWidth: 3
            },
            // 开始不显示拐点， 鼠标经过显示
            showSymbol: false,
            smooth: true,
            data: [20, 82, 91, , 90, 30, 10, 120, 132, 101, 134, , 30, 10, 120, 132, 101, 134, 90, 30, 10, 120, , 101, 134, 90, 30, 10,30, 40],
        },
        {
        type: 'custom',
        name: '预报',
        itemStyle: {
            borderWidth: 5
        },
        renderItem: function (params, api) {
            var xValue = api.value(0);
            var highPoint = api.coord([xValue, api.value(1)]);
            var lowPoint = api.coord([xValue, api.value(2)]);
            var halfWidth = api.size([1, 0])[0] * 0.1;
            var style = api.style({
                stroke: api.visual('color'),
                fill: undefined
            });
            return {
            type: 'group',
            children: [
                {
                type: 'line',
                transition: ['shape'],
                shape: {
                    x1: highPoint[0] - halfWidth,
                    y1: highPoint[1],
                    x2: highPoint[0] + halfWidth,
                    y2: highPoint[1]
                },
                style: style
                },
                {
                type: 'line',
                transition: ['shape'],
                shape: {
                    x1: highPoint[0],
                    y1: highPoint[1],
                    x2: lowPoint[0],
                    y2: lowPoint[1]
                },
                style: style
                },
                {
                type: 'line',
                transition: ['shape'],
                shape: {
                    x1: lowPoint[0] - halfWidth,
                    y1: lowPoint[1],
                    x2: lowPoint[0] + halfWidth,
                    y2: lowPoint[1]
                },
                style: style
                }
            ]
            };
        },
        encode: {
            x: 0,
            y: [1, 2]
        },
        data: forecastDate,
        z: 100
        }
    ]
};
myChart.setOption(option);